<template>
  <div>
<h1>查看门票
  <el-button @click="clearTicketExpire" type="text">一键清理过期门票</el-button>
</h1>
    <div style="color: crimson">* 门票过期10天后才可被清理</div>
  <div style="text-align: left" v-if="showBtn">
    <el-popconfirm
        confirmButtonText="确定"
        cancelButtonText="取消"
        title="删除后无法恢复，是否继续？"
        @confirm="deleteTickets"
    >
      <template #reference>
        <el-button  size="small" type="primary">
          <el-icon><delete/></el-icon>&nbsp;批量删除</el-button>
      </template>
    </el-popconfirm>
  </div>
  <el-table
      :data="ticketList"
      :header-cell-style="{textAlign:'center'}"
      stripe style="width: 100%;border-radius: 5px 5px 0 0;"
      @selection-change="handleSelectionChange"
  >
    <el-table-column align="center" type="selection" width="80"> </el-table-column>
    <el-table-column   align="center" prop="scenicTicketName" label="门票名称" />
    <el-table-column   align="center" prop="scenicTicketDescription" label="门票描述" />
    <el-table-column   align="center" prop="scenicTicketPrice" label="门票价格" />
    <el-table-column   align="center" prop="scenicTicketPublishtime" label="门票发布时间" />
    <el-table-column   align="center" prop="scenicTicketStart" label="开始购买" />
    <el-table-column   align="center" prop="scenicTicketExpire" label="门票过期时间">
      <template #default="scope">
        {{scope.row.scenicTicketExpire===null ? '长期有效' : scope.row.scenicTicketExpire}}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="scenicTicketNumber" label="门票数量"/>
    <el-table-column align="center" prop="scenicTicketSale" label="门票销量"/>
    <el-table-column align="center" prop="scenicTicketStatus" label="门票状态">
      <template #default="scope">
        <div v-if="scope.row.scenicTicketStatus==='UnExpire'">
          <el-tag type="success">{{ticketType.UnExpire}}</el-tag>
        </div>
        <div v-else>
          <el-tag>{{ticketType.Expire}}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="取消"
            title="删除后无法恢复，是否继续？"
            @confirm="deleteTicket(scope.row.scenicTicketId)"
        >
          <template #reference>
            <el-button  size="small" type="primary"><el-icon><delete/></el-icon>&nbsp;删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>

  </div>
</template>

<script>
import {deleteTicket, deleteTicketByIds, getTicket} from "@/api/ticket";
import {getDevice} from "@/utils/get-device";
import {Delete} from "@element-plus/icons";

export default {
  name: "lookTicket",
  components: {Delete},
  data(){
    return{
      search:'',
      ticketList:[],
      currentPage:1,
      total:0,
      pageSize:10,
      ticketType:{'UnExpire':'未过期','Expire':'已过期'},
      showBtn:false,
      layout:'total, sizes, prev, pager, next, jumper',
      listDelete:[]
    }
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getTicketList()
  },
  methods:{
    //批量删除
    deleteTickets(){
      const ids=[]
      this.listDelete.forEach(ticket =>{
        ids.push(ticket.scenicTicketId)
      })
     deleteTicketByIds(ids).then(()=>{
       this.getTicketList()
     })
    },
    //删除单张票
    deleteTicket(id){
      const  ids=[]
      ids.push(id)
      deleteTicketByIds(ids).then(()=>{
        this.getTicketList()
      })
    },
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
    handleSizeChange(val) {
      this.pageSize = val
        this.getTicketList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
        this.getTicketList()
    },
    getTicketList(){
      getTicket(this.currentPage,this.pageSize).then(response =>{
        this.ticketList=response.data.ticketList
        this.total=response.data.total
      })
    },
    clearTicketExpire(){
      deleteTicket().then(()=>{
        this.getTicketList()
      })

    }
  }
}
</script>

<style scoped>

</style>
